 template
<template>
  <!-- 当点击设备时，触发 handleClick 方法 -->
  <div class="" @click="handleClick(devices)">
    <!-- 插槽，允许父组件传入内容，并提供 loading 状态 -->
    <slot v-bind="{ loading }" />
  </div>
</template>

<script setup>
// 导入 useInstallAction 钩子和 useTaskStore 存储
import { useInstallAction } from '$/composables/useInstallAction/index.js'
import { useTaskStore } from '$/store/index.js'

// 定义 props，包含一个名为 devices 的数组属性
const props = defineProps({
  devices: {
    type: Array,
    default: () => [],
  },
})

// 使用 useInstallAction 钩子，获取 loading 状态和 invoke 方法，此处重命名为 handleClick
const { loading, invoke: handleClick } = useInstallAction()

// 获取任务存储实例
const taskStore = useTaskStore()

// 监听 'install' 事件，当有安装任务时，开始执行任务
taskStore.on('install', (task) => {
  taskStore.start({
    task,
    handler: handleClick,
  })
})
</script>

<style></style>
